<template>
  <div class="nav">
    <ul>
      <li
        @click="tapChange(i, v)"
        :class="{ active: flag == i }"
        v-for="(v, i) in tap"
        :key="i"
      >
        {{ v.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props, { emit }) {
    let tap = ref([
      { name: "全部",id: "" },
      { name: "精华", id: "ask" },
      { name: "分享", id: "share" },
      { name: "问博", id: "good" },
      { name: "招聘", id: "job" },
      { name: "客户端测试" },
    ]);

    let flag = ref(0); // 激活类
    function tapChange(i, item) {
      flag.value = i;
      sessionStorage.setItem("flag", JSON.stringify(flag.value));
      emit("tapChange", item);
    }
    flag.value = JSON.parse(sessionStorage.getItem("flag"));
    console.log(tap.value);
    return { tap, flag, tapChange };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.active {
  background-color: rgb(84, 247, 52);
}
.nav {
  width: 100%;
  height: 50px;
  background-color: black;
  ul {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      list-style: none;
      color: #fff;
    }
  }
}
</style>
